<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="Canvas Flowmap Layer with the Esri ArcGIS API for JavaScript v3.">
  
  <title>Canvas Flowmap Layer with JSAPI v3</title>
  
  <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/themes/calcite/esri/esri.css">
  
  <!-- see https://esri.github.io/calcite-web/ -->
  <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.1.0/css/calcite-web.min.css">
  
  <style>
    html,
    body,
    #map {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow-y: hidden;
    }

    .controls-panel {
      z-index: 30;
      position: absolute;
      top: 15px;
      right: 15px;
      width: 290px;
      opacity: 0.85;
    }

    .custom-card-shadow {
      -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5)
    }

    .off {
      display: none;
    }

    @media (max-width: 860px) and (orientation: portrait) {
      .controls-panel {
        position: inherit;
        top: inherit;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 33%;
        overflow-y: auto;
        opacity: 1.0;
      }
    }

  </style>
</head>

<body class="calcite">

  <div id="map"></div>

  <div class="controls-panel">
    <div class="card card-bar-blue animate-fade-in custom-card-shadow off" id="controlsPanelCard">
      <div class="card-content">

        <h4>Canvas Flowmap Layer</h4>

        <div class="font-size--2">
          Explore <strong>origin-to-destination</strong> layers with different relationships:
        </div>

        <div class="">
          <button class="btn btn-small btn-fill" id="oneToManyLayerButton">
            One-to-Many
          </button>
          <button class="btn btn-small btn-fill btn-clear" id="manyToOneLayerButton">
            Many-to-One
          </button>
          <button class="btn btn-small btn-fill btn-clear" id="oneToOneLayerButton">
            One-to-One
          </button>
        </div>

        <div class="leader-1 font-size--2">
          Change animation properties:
        </div>

        <div style="display: flex; align-items: flex-end; justify-content: space-between;">
          <button class="btn btn-small btn-clear btn-half" id="pathAnimationButton" style="width: 49% ;">
            <i class="icon-ui-pause icon-ui-red"></i>
            Toggle
          </button>
          <select id="pathAnimationStyleSelect" style="height: 2.1rem; width: 49%;"></select>
        </div>

        <div>
            <input id="pathAnimationDurationInput" type="number" min="100" step="100" value="2000" style="height: 2.1rem; width: 49%; display: inline-block" />
            <span class="font-size--2" style="margin-left: 5px;">duration (ms)</span>
        </div>

        <div class="leader-1 font-size--2">
          Change user interaction and path selection properties:
        </div>

        <div style="display: flex; align-items: flex-end; justify-content: space-between;">
          <select class="" id="userInteractionSelect" style="height: 2.1rem; width: 49%;">
            <option value="click" title="click on origin or destination point" selected>
              Click
            </option>
            <option value="mouse-over" title="hover over origin or destination point">
              Mouse-over
            </option>
          </select>
          <select class="" id="pathSelectionTypeSelect" style="height: 2.1rem; width: 49%;">
            <option value="SELECTION_NEW" title="new selection" selected>
              New
            </option>
            <option value="SELECTION_ADD" title="add to selection">
              Add
            </option>
            <option value="SELECTION_SUBTRACT" title="subtract from selection">
              Subtract
            </option>
          </select>
        </div>

      </div>
    </div>
  </div>


  <!-- load 3rd-party CSV parsing libary  -->
  <script src="https://unpkg.com/papaparse@4.6.1/papaparse.min.js"></script>

  <!-- set Dojo configuration options -->
  <script>
    var dojoConfig = {
      async: true,
      packages: [{
        name: 'Canvas-Flowmap-Layer',
        location: location.pathname.replace(/[^\/]+$/, '') + '../../src-jsapi-3'
      }]
    };

  </script>
  <!-- load Esri JSAPI -->
  <script src="https://js.arcgis.com/3.26compact/"></script>

  <!-- load this app's code -->
  <script src="script.js"></script>
</body>

</html>
